<template>
  <div class="add_dialog" id="add_dialog">
    <form class="layui-form" action="" lay-filter="formTeacherFilter">
      <div class="layui-row">
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">上报月份</label>
            <div class="layui-input-inline layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-date"></i>
              </div>
              <input
                type="text"
                name="reportingMonth"
                id="reportingMonth"
                lay-verify="date"
                placeholder="请选择"
                autocomplete="off"
                class="layui-input input-100"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">车辆号码</label>
              <div class="layui-input-inline">
                <select name="licPlateNum">
                  <option value=""></option>
                  <option :value="item" v-for="(item,index) in licencePlateArr" :key="index">{{ item }}</option>
                </select>
              </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">上次里程</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="lastMileage"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
          <div class="layui-form-item">
            <label class="layui-form-label">本次里程</label>
            <div class="layui-input-block">
              <input
                type="text"
                name="currentMileage"
                placeholder="请输入"
                autocomplete="off"
                class="layui-input"
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs6">
            <div class="layui-form-item">
              <label class="layui-form-label">所属部门</label>
              <div class="layui-input-inline" id="department-style">
                <input
                name="department"
                type="text"
                id="tree4"
                lay-filter="tree4"
                class="layui-input"
              />
              </div>
            </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
              <textarea
                name="remark"
                placeholder="请输入"
                class="layui-textarea"
              ></textarea>
            </div>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button
                type="button"
                class="layui-btn"
                lay-submit
                lay-filter="submit_table"
              >
                提交
              </button>
              <button type="reset" class="layui-btn layui-btn-primary reset_from" style="display: none;">取消</button>
             <button type="button" class="layui-btn layui-btn-primary cancel">取消</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>
<script>
import { getCarBasicInfo } from '@/api/real_estate_ledger'
export default {
  data() {
    return {
      licencePlateArr: []
    };
  },
  created() {
    this.getCarInfo()
  },
  methods: {
    async getCarInfo() {
      const result = await getCarBasicInfo()
      if(result.code === '00') {
        this.licencePlateArr = result.data.map(item => item.licPlateNum)
      }
    },
    echoData(departmentId) {
      window.layui.use(["form", "treeSelect"], async () => {
        this.treeSelect = window.layui.treeSelect;
        // 树形下拉组件
        this.treeSelect.render({
          // 选择器
          elem: "#tree4",
          // 数据
          data:
            process.env.VUE_APP_BASE_API +
            '/service-hrm/hrm-organization/query-nodes?isLoadAllDescendants=1&targetType="com"',
          // 异步加载方式：get/post，默认get
          type: "post",
          headers: {
            Authorization: "Bearer " + this.token,
          },
          style: {
            folder: {
              // 父节点图标
              enable: true, // 是否开启：true/false
            },
            line: {
              // 连接线
              enable: true, // 是否开启：true/false
            },
          },
          // 占位符
          placeholder: "请选择",
          // 是否开启搜索功能：true/false，默认false
          search: true,
          // 加载完成后的回调函数
          success: (d) => {
             // 选中节点，根据id筛选
            if(departmentId) {
              this.treeSelect.checkNode("tree4", departmentId);
              const dom = document.querySelectorAll('#department-style .layui-treeSelect')
              dom[dom.length - 1].remove()
            }else {
              this.treeSelect.checkNode("tree4", null);
              const dom = document.querySelectorAll('#department-style .layui-treeSelect')
              dom[dom.length - 1].remove()
            }
           
          },
        });
      });
    },
  }
};
</script>
<style scoped></style>

<style scoped lang="scss">
.add_dialog {
  padding: 12px;
  .layui-form-label {
    width: 100px;
  }
  .layui-input {
    width: 80%;
    &.input-91 {
      width: 91.5%;
    }
    &.input-100 {
      width: 100%;
    }
  }
  .layui-textarea {
    width: 92%;
  }
  .layui-upload-drag {
    padding-top: 10px;
    width: 160px;
    height: 50px;
  }
  .layui-upload-drag .layui-icon {
    font-size: 35px;
  }
  .layui-input-inline {
    width: 214px;
  }
  .basic_info {
    position: relative;
    margin-left: 22px;
    font-size: 16px;
    color: #141313;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -16px;
      transform: translateY(-50%);
      display: inline-block;
      margin-right: 12px;
      width: 5px;
      height: 15px;
      background-color: #ff6534;
    }
  }
}
</style>
